<template>
  <view class="container">
    <!-- 健康数据输入表单 -->
    <view class="health-form">
      <view class="form-item">
        <text class="label">身高 (cm)</text>
        <input 
          class="input" 
          type="number" 
          placeholder="请输入身高" 
          v-model="height" 
        />
      </view>
      <view class="form-item">
        <text class="label">体重 (kg)</text>
        <input 
          class="input" 
          type="number" 
          placeholder="请输入体重" 
          v-model="weight" 
        />
      </view>
      <view class="form-item">
        <text class="label">年龄</text>
        <input 
          class="input" 
          type="number" 
          placeholder="请输入年龄" 
          v-model="age" 
        />
      </view>
      <view class="form-item">
        <text class="label">性别</text>
        <picker 
          class="picker" 
          mode="selector" 
          :range="genders" 
          @change="onGenderChange"
        >
          <view class="picker-text">{{ genders[genderIndex] }}</view>
        </picker>
      </view>
      <button class="submit-btn" @click="submitHealthData">提交</button>
    </view>

    <!-- 健康数据展示 -->
    <view class="health-data" v-if="healthData">
      <view class="data-item">
        <text class="data-label">身高</text>
        <text class="data-value">{{ healthData.height }} cm</text>
      </view>
      <view class="data-item">
        <text class="data-label">体重</text>
        <text class="data-value">{{ healthData.weight }} kg</text>
      </view>
      <view class="data-item">
        <text class="data-label">体脂率</text>
        <text class="data-value">{{ healthData.body_fat_percentage }}%</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: null, // 身高
      weight: null, // 体重
      age: null, // 年龄
      genderIndex: 0, // 性别索引
      genders: ['女性', '男性'], // 性别选项
      healthData: null // 健康数据
    };
  },
  computed: {
    // 当前选择的性别
    gender() {
      return this.genderIndex === 1 ? 1 : 0; // 男性为1，女性为0
    }
  },
  methods: {
    // 性别选择器变化事件
    onGenderChange(e) {
      this.genderIndex = e.detail.value;
    },

    // 提交健康数据
    async submitHealthData() {
      if (!this.height || !this.weight || !this.age) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }

      try {
        const response = await uni.request({
          url: `${this.$baseUrl}/user_center/recordHealthData`,
          method: 'POST',
          header: {
            'Authorization': 'Bearer ' + uni.getStorageSync('access_token') // 携带 Token
          },
          data: {
            height: this.height,
            weight: this.weight,
            age: this.age,
            gender: this.gender
          }
        });

        if (response[1].statusCode === 200) {
          uni.showToast({ title: '健康数据已记录', icon: 'success' });
          this.fetchHealthData(); // 提交成功后获取最新数据
        } else {
          throw new Error('提交健康数据失败');
        }
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' });
      }
    },

    // 获取健康数据
    async fetchHealthData() {
      try {
        const response = await uni.request({
          url: `${this.$baseUrl}/user_center/getHealthData`,
          method: 'GET',
          header: {
            'Authorization': 'Bearer ' + uni.getStorageSync('access_token') // 携带 Token
          }
        });

        if (response[1].statusCode === 200) {
          this.healthData = response[1].data;
        } else {
          throw new Error('获取健康数据失败');
        }
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' });
      }
    }
  },
  async onLoad() {
    await this.fetchHealthData(); // 页面加载时获取健康数据
  }
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #F2F6F4; /* 温暖的背景色 */
  color: #333333;
  font-family: 'Arial', sans-serif; /* 清新的字体 */
}

.health-form {
  background: #E3F0E3; /* 柔和的绿色背景 */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
}

.label {
  font-size: 16px;
  color: #4D5B5B; /* 深绿色文本 */
  margin-bottom: 8px;
  display: block;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #A7C6A6; /* 清新的绿色边框 */
  border-radius: 10px;
  font-size: 16px;
  background: #FFFFFF;
}

.picker {
  width: 100%;
  padding: 10px;
  border: 1px solid #A7C6A6; /* 清新的绿色边框 */
  border-radius: 10px;
  background: #FFFFFF;
}

.picker-text {
  font-size: 16px;
  color: #4D5B5B;
}

.submit-btn {
  background: #A7C6A6; /* 清新的绿色按钮 */
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 18px;
  cursor: pointer;
  margin-top: 20px;
}

.submit-btn:hover {
  background: #8DAF8E; /* 鼠标悬停时的色调 */
}

.health-data {
  margin-top: 20px;
  background: #E3F0E3; /* 柔和的绿色背景 */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.data-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.data-label {
  font-size: 16px;
  color: #4D5B5B;
}

.data-value {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
</style>